<template>
  <div class="account-settings-info-view">
    <a-row :gutter="8">
      <a-col :md="8" :lg="12">
        <a-form layout="vertical" :form="form">
          <a-form-item label="账号">
            <a-input :disabled="true" v-decorator="['accout']" />
          </a-form-item>
          <a-form-item label="新密码">
            <a-input-password
              v-decorator="['password',{
                rules: [
                  {
                    required: true,
                    message: '请输入新密码',
                  },
                  {
                    min: 6,
                    message: '密码最少6位',
                  },
                  {
                    pattern: /^[^\s]*$/,
                    message: '禁止输入空格',
                  }
                ],
              },]"
            />
          </a-form-item>
          <a-form-item label="确定密码">
            <a-input-password
              v-decorator="['confirm',{rules: [{required: true,message: '请再次输入你的新密码!',},{validator: compareToFirstPassword,},],},]"
              type="password"
            />
          </a-form-item>
          <a-form-item>
            <a-button type="primary" @click="submitInfo">提交</a-button>
          </a-form-item>
        </a-form>
      </a-col>
    </a-row>
  </div>
</template>
<script>
import { getuserInfo, updateuser } from '@/api/admin'
export default {
  data () {
    return {
      form: this.$form.createForm(this),
      // 头像上传进度条
      loading: false,
      // 没有头像默认使用系统头像
      imageUrl: '',
      // 文件名称
      filename: '',
      user: {}
    }
  },
  computed: {
    userInfo () {
      return this.$store.getters.userInfo
    }
  },
  created () {
    this.user = Object.assign({}, this.userInfo)
    this.getUser()
  },
  methods: {
    getUser () {
      getuserInfo(this.user.id).then(res => {
        if (res.status === 200) {
          this.user = Object.assign({}, res.result)
          if (
            this.user.adminStaffEntity !== undefined &&
            this.user.adminStaffEntity.accout
          ) {
            this.$nextTick(() => {
              // 表单中绑定信息项
              this.form.setFieldsValue({
                accout: this.user.adminStaffEntity.accout
              })
            })
          }
        }
      })
    },
    compareToFirstPassword (rule, value, callback) {
      const form = this.form
      if (value && value !== form.getFieldValue('password')) {
        callback('两次密码输入不一致!')
      } else {
        callback()
      }
    },
    /**
     * 提交校验
     */
    submitInfo () {
      // 触发表单验证
      this.form.validateFields((err, values) => {
        // 验证表单没错误
        if (!err) {
          const _this = this
          this.$confirm({
            title: '警告',
            content: `确认要修改密码吗?`,
            okText: '确认',
            okType: 'danger',
            cancelText: '取消',
            onOk () {
              _this.saveInfo(values)
            },
            onCancel: () => {

            }
          })
        }
      })
    },
    /**
     * 保存信息到后台
     */
    saveInfo (values) {
      values.id = this.userInfo.id
      updateuser(values)
        .then(res => {
          if (res.status === 200) {
            this.$notification['success']({
              message: '密码修改成功',
              duration: 2
            })
            this.psdModalVis = false
          } else {
            this.$notification['error']({
              message: res.message,
              duration: 4
            })
          }
        })
        .catch(err => {
          if (err || err.response || err.response) {
            this.$notification['error']({
              message: err.response.data.message,
              duration: 4
            })
          }
        })
    }
  }
}
</script>
<style lang="less" scoped>
.avatar-uploader > .ant-upload {
  width: 128px;
  height: 128px;
}
.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}
.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}
</style>
